<template>
  <view class="product-detail">
    <wd-navbar
      fixed
      placeholder
      left-arrow
      @click-left="handleClickLeft"
      :bordered="false"
      safeAreaInsetTop
    ></wd-navbar>
    <view class="viewpot">
      <view class="swipper">
        <wd-swiper
          :list="swiperList"
          object-fit="contain"
          :indicator="{ type: 'dots-bar' }"
          v-model:current="current"
          @click="handleClick"
          @change="onChange"
          imageMode="aspectFit"
        ></wd-swiper>
      </view>
      <view class="product-box">
        <view class="product-top">
          <view class="purchase-box">
            <view class="purchase-box-left">
              <view class="prod-title">敬修堂防脱滋养育发洗发露</view>
              <view class="prod-text">控油防脱两不误 细腻丰富泡沫</view>
            </view>
            <view class="purchase-box-right">
              <span style="color: #1d241e; font-size: 36rpx">￥299</span>
            </view>
          </view>
          <view class="purchase-detail">
            <view class="rating-box">
              <image src="@/static/icon/tree.png" class="rating-title" />
              <text class="rating-score">滋养头皮</text>
            </view>
            <view class="rating-box">
              <image src="@/static/icon/avaterk.png" class="rating-title" />
              <text class="rating-score">防脱育发</text>
            </view>
            <view class="rating-box">
              <image src="@/static/icon/fllower.png" class="rating-title" />
              <text class="rating-score">控油防脱</text>
            </view>
          </view>
        </view>
        <view class="product-detail-manger">
          <view class="manger-text">测试环境</view>
          <view class="manger-image-detail">
            <view class="detail-images">
              <image src="@/static/prod/detail3.png" class="images-box" />
            </view>
            <view class="detail-images">
              <image src="@/static/prod/detail1.png" class="images-box" />
            </view>
            <view class="detail-images">
              <image src="@/static/prod/detail2.png" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="showBuyCart" class="buy-cart">
      <view class="bottom-left">
        <image src="@/static/icon/lujin.png" class="bottom-left-img" mode="scaleToFill" />
      </view>
      <view class="bottom-content" @click="onBuy">立即购买</view>
      <view class="bottom-right">
        <wd-input-number
          v-model="value"
          @change="handleChange"
          custom-class="custom-input-number"
          input-width="40rpx"
        />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const current = ref<number>(0)
  const showBuyCart = ref(false) // 控制是否显示底部购买栏
  const scrollTop = ref(0)
  const swiperList = ref([
    '/static/prod/detail4.png',
    '/static/prod/detail3.png',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  ])
  function handleClick(e) {
    console.log(e)
  }
  function handleClickLeft() {
    uni.navigateBack()
  }
  function onChange(e) {
    console.log(e)
  }
  const value = ref<number>(1)
  function handleChange({ value }) {
    console.log(value)
  }
  const onBuy = () => {
    uni.navigateTo({ url: '/pages/buy/index' })
  }
  onReachBottom(() => {
    console.log('触底刷新')
    showBuyCart.value = true
  })
  onPageScroll((e) => {
    scrollTop.value = e.scrollTop
    // 当滚动到 300px 以内时隐藏，接近底部时显示
    if (scrollTop.value < 300) {
      showBuyCart.value = false
    }
  })
</script>
<style lang="scss">
  @import './index.scss';
  .buy-cart {
    position: fixed;
    display: flex;
    width: 100%;
    height: 83px;
    bottom: 0;
    background: rgba(255, 255, 255, 1);
    padding: 20rpx 40rpx;
    animation: slideUp 0.3s ease;
    .bottom-left {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80rpx;
      height: 80rpx;
      border-radius: 24rpx;
      background-color: rgba(9, 171, 79, 1);
      margin-right: 30rpx;
      .bottom-left-img {
        height: 50rpx;
        width: 50rpx;
      }
    }
    .bottom-content {
      height: 80rpx;
      width: 210px;
      display: flex;
      font-size: 18px;
      font-weight: 700;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-color: rgba(9, 171, 79, 1);
      border-radius: 20rpx;
    }
    .bottom-right {
      height: 80rpx;
      margin-left: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
</style>
